<!doctype html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/favicon.svg" />
    <link rel="stylesheet" href="/resource/loading.css" />

    <title><%= title %></title>
  </head>

  <body>
    <div id="app">
      <!-- 白屏时的loading效果 -->
      <div class="loading-container">
        <div id="loadingLogo" style="margin-bottom: -20px;">
            <img src="/src/assets/images/loading2.png" class="img1"  style="width: 100px;height:100px;margin-bottom: 0px">
        </div>

        <div class="loading-title">
          <img src="/src/assets/images/loading1.png"   style="width: 200px;margin-bottom: 20px">
        </div>
      </div>
      <script src="/resource/loading.js"></script>
    </div>
    <script type="module" src="/src/main.js"></script>
    <style>
        .img1 {
          width: 50px;
          height:50px;
          margin-left: 70px;
          
          /* 先执行一次上升动画，然后执行浮动动画 */
          animation: 
              riseUp 1.5s forwards,
              float1 1s 1.5s infinite ease;
      }
      
      /* 上升动画（只执行一次） */
      @keyframes riseUp {
          from { transform: translateY(0); }
          to { transform: translateY(-25px); }
      }
      
      /* 浮动动画（循环执行） */
      @keyframes float1 {
          0%, 100% { transform: translateY(-25px); }
          50% { transform: translateY(-20px); }
      }
    </style>
  </body>
</html>
